<template>
	<div class="row">
		<h1 v-show="listInfo.isFirst">欢迎使用</h1>
		<h1 v-show="listInfo.isLoading">正在加载中......请稍等</h1>
		<h1 v-show="listInfo.errMsg">阿偶，请求出错：{{listInfo.errMsg}}</h1>
		<div v-show="listInfo.users.length" class="card" v-for="userObj in listInfo.users" :key="userObj.login">
			<a :href="userObj.html_url" target="_blank">
				<img :src="userObj.avatar_url" style='width: 100px'/>
			</a>
			<p class="card-text">{{userObj.login}}</p>
		</div>
	</div>
</template>

<script>
	import pubsub from 'pubsub-js'
	export default {
		name:'List',
		data(){
			return {
				listInfo:{
					users:[],//存储用户,
					isFirst:true, //标识是否初次展示
					isLoading:false, //标识是否处于加载中
					errMsg:'' //存储错误信息
				}
			}
		},
		methods:{
			updateInfo(_,obj){
				console.log(_,obj)
				this.listInfo = obj
			}
		},
		mounted(){
			// this.$bus.$on('updateList',this.updateInfo)
			this.pubid = pubsub.subscribe('updateList',this.updateInfo)
		},
		beforeDestroy() {
			pubsub.unsubscribe(this.pubid)
			// this.$bus.$off('updateList')
		},
	}
</script>

<style scoped>
	.album {
		min-height: 50rem; /* Can be removed; just added for demo purposes */
		padding-top: 3rem;
		padding-bottom: 3rem;
		background-color: #f7f7f7;
	}

	.card {
		float: left;
		width: 33.333%;
		padding: .75rem;
		margin-bottom: 2rem;
		border: 1px solid #efefef;
		text-align: center;
	}

	.card > img {
		margin-bottom: .75rem;
		border-radius: 100px;
	}

	.card-text {
		font-size: 85%;
	}
</style>